<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 顶部的处理 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="6">
          <el-col :span="6">
            <el-form-item label="目录名称">
              <el-input v-model="form.tagName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" @click="clear">清除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="handleFilter">搜索</el-button>
          </el-col>
          <el-col :span="6">
            <!-- <el-button style="backgroundcolor: #ccc"></el-button> -->
            <p></p>
          </el-col>
          <el-col :span="2">
            <el-button type="success" @click="handleAdd('add')">新增标签</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 内容的处理 -->
      <template>
        <el-table style="width: 100%" :data="List">
          <el-table-column label="序号" width="100" type="index" :index="handleIndex">
          </el-table-column>
          <el-table-column label="所属学科" width="180" prop="subjectName">
          </el-table-column>
          <el-table-column label="标签名称" prop="tagName">
          </el-table-column>
          <el-table-column label="创建者" prop="username">
          </el-table-column>
          <el-table-column label="创建日期" prop="addDate" :formatter="formatDate" width="200">
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" style=" margin: -5px;" @click="handleState(scope.row)"><span v-if="scope.row.state === 0" style="color:green;">启用</span>
                <span v-else style="color:green;">禁用</span>
              </el-button>
              <el-button size="mini" style=" margin: -5px;" v-if="scope.row.state === 0" @click="handleAdd(scope.row.id)">修改</el-button>
              <el-button size="mini" style=" margin: -5px;" v-else disabled>修改</el-button>
              <el-button size="mini" style=" margin: -5px;" v-if="scope.row.state === 0" @click="handledel(scope.row.id)">删除</el-button>
              <el-button size="mini" style=" margin: -5px;" v-else disabled>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Number(pages.page)" :page-size="Number(pages.pagesize)" layout=" ->, total,sizes, prev, pager, next, jumper" :total="Number(total)">
      </el-pagination>
    </el-card>

    <div>
      <!-- 弹出层 -->
      <tag-sadd ref='sadd' :List="List" v-on:newDataes="setlist" :formBase="formData" :titleInfo="titleInfo" />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { status } from '@/api/hmmm/constants.js'
import TagSadd from './../components/tags-add.vue'
import { list, changeState, simple, remove, detail } from '@/api/hmmm/tags.js'
export default {
  components: {
    TagSadd
  },
  data () {
    return {
      status: status,
      // 所属学科的列表
      // 简单数据列表的数组
      val: [],
      dialogVisible: false,
      // 获取的列表的数据
      List: [],
      total: null,
      pages: {
        page: 1,
        pagesize: 10
      },
      form: {
        tagName: '',
        state: ''
      },
      formData: {
        // 所属学科
        subjectID: '',
        tagName: ''
      },
      titleInfo: {
        pageTitle: '用户', // 页面标题
        text: '' // 新增、编辑文本
      }
    }
  },
  methods: {
    // 格式化时间
    formatDate (date) {
      // console.log(date)
      if (!date.addDate) return ''
      return moment(date.addDate).format('YYYY-MM-DD hh:mm:ss')
    },
    // 清除表单
    clear () {
      this.form = {}
    },
    // 动态索引序号
    handleIndex (index) {
      const { page, pagesize } = this.pages
      return (page - 1) * pagesize + index + 1
    },

    // 搜索
    async handleFilter () {
      if (this.form.directoryName === '') {
        this.setlist()
      } else {
        const ret = await list({
          ...this.pages,
          ...this.form
        })
        console.log(ret)
        if (ret.status === 200) {
          this.List = ret.data.items
          console.log(ret.data.items)
        }
      }
    },
    // 获取列表简单详情
    async handsimple () {
      const ret = await simple()
      this.val = ret.data
    },
    // 获取标签详情
    // async handleconst (List) {
    //   const ret = await detail({ id: List })
    //   console.log(ret)
    //   console.log(List)
    // },
    // 删除
    handledel (id) {
      this.$confirm('此操作将永久删除 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          const data = {
            id: id
          }
          await remove(data)
            .then(response => {
              this.$message.success('删除标签成功')
              this.setlist()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 标签页
    handleCurrentChange (val) {
      this.pages.page = val
      this.setlist()
    },
    handleSizeChange (val) {
      this.pages.pagesize = val
      if (this.pages.page === 1) {
        this.setlist(this.pages)
      }
    },
    async setlist () {
      const ret = await list(this.pages)
      this.List = ret.data.items
      this.page = ret.data.page
      this.pagesize = ret.data.pagesize
      this.total = ret.data.counts
    },
    // 禁用启用
    async handleState (val) {
      let status = ''
      if (val.state === 1) {
        val.state = 0
        status = '禁用'
      } else {
        val.state = 1
        status = '启用'
      }
      var data = {
        id: val.id,
        state: val.state
      }
      await changeState(data)
      this.$message.success('已成功' + status + '!')
    },
    // 重置表单
    query () {
      this.formData = {
        // 所属学科
        subjectID: '',
        tagName: ''
      }
    },
    // 添加新标签
    handleAdd (id) {
      this.query()
      this.$refs.sadd.dialogV()
      if (id === 'add') {
        this.titleInfo.text = '创建' // 给弹层传参
      } else {
        this.titleInfo.text = '编辑' // 给弹层传参

        this.hanldeEditForm(id)
      }
    },
    // 编辑
    // 表单详情数据加载
    async hanldeEditForm (objeditId) {
      this.formData.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      // 获取详情 给formData
      this.formData = res
    }

  },
  created () {
    this.setlist()
    this.handsimple()
  }
}
</script>

<style scoped lang='less'>
.el-row {
  margin-bottom: 20px;
  margin-top: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
// .el-table {
//   margin-left: 50px;
// }
.box-card {
  margin: 10px;
}
</style>
